{% extends "base.html" %}

{% block subtitle %}
  Editor View
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
  </script>
{% endblock header_js %}

{% block content %}
  <div ng-show="isDemoServer()" style="background-color: lightyellow; width: 700px; margin: 0 auto">
    <strong style="color: red">Warning</strong>: This site is a public demo playground for Oppia, and is updated frequently. Please regard any explorations that you create on it as transient -- they may be deleted at any time.
  </div>

  <div ng-controller="EditorExploration" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to publish an exploration! This will
          enable it to be played by anyone, and you will also be able to view
          statistics on readers' attempts at the exploration. Thank you for
          your contribution to the Oppia community, and for helping students
          to learn!
        </p>

        <p>
          Once you publish an exploration, you cannot unpublish it. Deletion
          of a published exploration may only occur with the approval of the
          site moderators. You will still be able to edit the exploration, and
          in the future we we plan to make it possible for other people to 
          improve it too.
        </p>

        <p>
          Would you like to publish this exploration?
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="publish()">Publish</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? This action cannot be reversed.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="delete()">Delete</button>
        <button class="btn" ng-click="cancel()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteState">
      <div class="modal-header">
        <h3>Delete State</h3>
      </div>

      <div class="modal-body">
        <p>
          Are you sure you want to delete the state "<[deleteStateName]>"?
          <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn" ng-click="delete()">Delete</button>
        <button class="btn" ng-click="cancel()">Close</button>
      </div>
    </script>

    <div class="container-fluid">
      <div class="oppia-content row-fluid">
        <div class="span12">

          <span class="pull-right" style="margin: 10px 50px 0 0">

            <button ng-hide="isPublic" type="button" ng-click="showPublishExplorationModal()">
              Publish
            </button>
            <img class="oppia-help" src="/images/help.png" ng-hide="isPublic"
                 tooltip="Click this button to publish your exploration in the gallery, so that others can read it."
                 tooltip-placement="bottom">

            &nbsp;&nbsp;&nbsp;

            <a class="btn" target="_blank" href="/learn/<[explorationId]>"
               title="Play this exploration in a new window.">
              <i class="icon-play"></i>
            </a>

            &nbsp;&nbsp;&nbsp;

            <a class="btn" ng-click="downloadExploration()"
               title="Download exploration as a zip file.">
              <i class="icon-download-alt"></i>
            </a>

            <span ng-if="currentUserIsAdmin || !isPublic">
              &nbsp;&nbsp;&nbsp;

              <button type="button" class="btn btn-danger"
                      ng-click="showDeleteExplorationModal()"
                      title="Delete this exploration">
                <i class="icon-trash" title="Delete Exploration"></i>
              </button>
            </span>
          </span>

          <h3>
            <[explorationTitle]>
            <span ng-if="isPublic" class="label label-info">
              Published
            </span>
          </h3>

          <div ng-if="!explorationTitle">
            <br><br><br><br><br><br>
            <center>
              <img src="/images/loading.gif" alt="Loading..." width="50px">
            </center>
          </div>

          <!-- The !! is necessary because the string 'f' is treated as false in AngularJS. -->
          <div ng-show="!!explorationTitle">
            <tabset>
              <tab heading="Exploration Details" active="mainTabActive" select="selectMainTab()" disabled="isStateLockedForEditing()">
                {% include 'editor/editor_metadata.html' %}
                <hr>
                {% include 'editor/editor_viz.html' %}
              </tab>

              <tab heading="Exploration Stats" active="statsTabActive" select="selectStatsTab()" disabled="isStateLockedForEditing()">
                {% include 'editor/stats_viewer.html' %}
              </tab>

              <tab heading="State Editor" disabled="!doesStateIdExist()" active="guiTabActive" select="selectGuiTab()">
                <div ng-controller="StateEditor" ng-if="doesStateIdExist()">
                  {% include 'editor/state_editor.html' %}
                </div>
              </tab>
            </tabset>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.2.8/d3.min.js"></script>
  <script>
    {{ include_js_file('services/explorationData.js') }}
    {{ include_js_file('editor/EditorExploration.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/StatsViewer.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/UnresolvedAnswers.js') }}
    // These should come after the valueGeneratorEditor scripts.
    {{ include_js_file('editor/InteractiveWidgetEditor.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
    {{ include_js_file('components/noninteractiveWidgetDirectives.js') }}
  </script>
{% endblock footer_js %}
